<template>
    <div class="admin-list">
        <Row>
            <Col :xs="24" :sm="12">
            <Form :model="formItem" ref="formItem" :inline="true" action="javascript:void(0)">
                <FormItem>
                    <Input v-model="formItem.key" placeholder="输入关键词查找..."></Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="renderTable('formItem')">查找</Button>
                </FormItem>
            </Form>
            </Col>
        </Row>
        <!-- 批量操作 -->
        <div class="action-btn">
            <Button size="small" @click="deleteData" style="margin-right: 8px" type="error">批量删除</Button>
            <Button size="small" @click="showCreate" type="success">添加管理员</Button>
        </div>
        <Table border :columns="list" ref="adminList" :data="tablelist" @on-selection-change="changeData"
            :loading="dataloading">
            <template #status="{ row }">
                <i-switch :true-value="1" :false-value="0" v-model="row.status" size="large"
                    @on-change="changeStatus(row.id, $event)"></i-switch>
            </template>
            <template #action="{ row, index }">
                <Button type="success" size="small" style="margin-right: 5px;float:left"
                    @click="showEditInfo(row.id)">修改</Button>
                <Button type="warning" size="small" style="margin-right: 5px;float:left"
                    @click="showEditPwd(row.id)">密码</Button>
                <Button type="error" size="small" @click="removeDetail(index, row.id)">删除</Button>
            </template>
        </Table>
        <!-- 分页 -->
        <div class="table-page">
            <Page size="small" ref="listPage" :total="pages.total" :current="pages.current" :page-size="pages.size"
                show-elevator show-total @on-change="changePage"></Page>
        </div>
        <!-- 添加的弹出 -->
        <!-- 需要全屏时添加这句 :mask="false" class-name="idw100" -->
        <Drawer :closable="false" :mask-closable="false" :scrollable="true" title="添加管理员" width="640"
            v-model="showCreateStatus">
            <Spin size="large" fix v-if="loading"></Spin>
            <Form :label-width="80" :model="adminInfo" ref="adminCreateValidate" :rules="adminCreateValidate"
                action="javascript:void(0)">
                <FormItem label="部门">
                    <TreeSelect clearable multiple v-model="adminInfo.department_ids" :data="departmentList"></TreeSelect>
                </FormItem>
                <FormItem label="角色">
                    <Select v-model="adminInfo.role_ids" multiple>
                        <Option v-for="item in roleList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="用户名" prop="name">
                    <Input v-model="adminInfo.name" placeholder="输入用户名..."></Input>
                </FormItem>
                <FormItem label="姓名" prop="realname">
                    <Input v-model="adminInfo.realname" placeholder="输入姓名..."></Input>
                </FormItem>
                <FormItem label="手机号">
                    <Input v-model="adminInfo.phone" placeholder="输入手机号..."></Input>
                </FormItem>
                <FormItem label="邮箱">
                    <Input v-model="adminInfo.email" placeholder="输入邮箱..."></Input>
                </FormItem>
                <FormItem label="密码" prop="password">
                    <Input v-model="adminInfo.password" type="password" placeholder="输入密码..."></Input>
                </FormItem>
                <FormItem label="确认密码">
                    <Input v-model="adminInfo.password_confirmation" type="password" placeholder="确认密码..."></Input>
                </FormItem>
                <FormItem>
                    <Button style="margin-right: 8px" @click="showCreateStatus = false">取消</Button>
                    <Button type="primary" @click="createAdmin('adminCreateValidate')">提交</Button>
                </FormItem>
            </Form>
        </Drawer>
        <!-- 修改资料 -->
        <Drawer :closable="false" :mask-closable="false" :scrollable="true" title="修改资料" width="640"
            v-model="showEditInfoStatus">
            <Spin size="large" fix v-if="loading"></Spin>
            <Form :label-width="80" :model="adminInfo" ref="adminEditValidate" :rules="adminEditValidate"
                action="javascript:void(0)">
                <FormItem label="部门">
                    <TreeSelect clearable multiple v-model="adminInfo.department_ids" :data="departmentList"></TreeSelect>
                </FormItem>
                <FormItem label="角色">
                    <Select v-model="adminInfo.role_ids" multiple>
                        <Option v-for="item in roleList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="用户名" prop="name">
                    <Input v-model="adminInfo.name" disabled placeholder="输入用户名..."></Input>
                </FormItem>
                <FormItem label="姓名" prop="realname">
                    <Input v-model="adminInfo.realname" placeholder="输入姓名..."></Input>
                </FormItem>
                <FormItem label="手机号">
                    <Input v-model="adminInfo.phone" placeholder="输入手机号..."></Input>
                </FormItem>
                <FormItem label="邮箱">
                    <Input v-model="adminInfo.email" placeholder="输入邮箱..."></Input>
                </FormItem>
                <FormItem>
                    <Button style="margin-right: 8px" @click="showEditInfoStatus = false">取消</Button>
                    <Button type="primary" @click="updateAdmin('adminEditValidate')">提交</Button>
                </FormItem>
            </Form>
        </Drawer>
        <!-- 修改密码 -->
        <Drawer :closable="false" :mask-closable="false" :scrollable="true" title="修改资料" width="640"
            v-model="showEditPwdStatus">
            <Spin size="large" fix v-if="loading"></Spin>
            <Form :label-width="80" :model="adminPwd" ref="adminPasswordValidate" :rules="adminPasswordValidate"
                action="javascript:void(0)">
                <FormItem label="密码" prop="password">
                    <Input v-model="adminPwd.password" type="password" placeholder="输入密码..."></Input>
                </FormItem>
                <FormItem label="确认密码">
                    <Input v-model="adminPwd.password_confirmation" type="password" placeholder="确认密码..."></Input>
                </FormItem>
                <FormItem>
                    <Button style="margin-right: 8px" @click="showEditPwdStatus = false">取消</Button>
                    <Button type="primary" @click="updatePassword('adminPasswordValidate')">提交</Button>
                </FormItem>
            </Form>
        </Drawer>
    </div>
</template>

<script>
export default {
    name: 'AdminList',
    data() {
        return {
            loading: false,
            dataloading: true,
            detail_id: 0,
            formItem: {
                'key': ''
            },
            pages: {
                current: 1,
                total: 0,
                size: 10
            },
            list: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: 'Id',
                    key: 'id',
                    width: 60,
                },
                {
                    title: '用户名',
                    minWidth: 120,
                    key: 'name'
                },
                {
                    title: '姓名',
                    width: 100,
                    key: 'realname'
                },
                {
                    title: '电话',
                    width: 150,
                    key: 'phone'
                },
                {
                    title: '邮箱',
                    width: 180,
                    key: 'email'
                },
                {
                    title: '最后登录时间',
                    width: 180,
                    key: 'lasttime'
                },
                {
                    title: '最后登录IP',
                    width: 120,
                    key: 'lastip'
                },
                {
                    title: '状态',
                    slot: 'status',
                    width: 100,
                },
                {
                    title: '操作',
                    slot: 'action',
                    width: 180,
                    align: 'left',
                }
            ],
            tablelist: [],
            roleList: [],
            departmentList: [],
            adminInfo: {
                department_ids: [],
                role_ids: [],
                name: '',
                realname: '',
                phone: '',
                email: '',
                password: '',
                password_confirmation: ''
            },
            adminPwd: {
                password: '',
                password_confirmation: ''
            },
            showCreateStatus: false,
            showEditInfoStatus: false,
            showEditPwdStatus: false,
            adminCreateValidate: {
                name: [
                    { required: true, message: '用户名必须填写', trigger: 'blur' },
                    { type: 'string', min: 2, max: 15, message: '用户名 3 - 15 位长度', trigger: 'blur' }
                ],
                realname: [
                    { required: true, message: '姓名必须填写', trigger: 'blur' },
                    { type: 'string', min: 2, max: 15, message: '姓名 3 - 15 位长度', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '密码必须填写', trigger: 'blur' },
                    { type: 'string', min: 6, max: 15, message: '密码 6 - 15 位长度', trigger: 'blur' }
                ]
            },
            adminEditValidate: {
                realname: [
                    { required: true, message: '姓名必须填写', trigger: 'blur' },
                    { type: 'string', min: 2, max: 15, message: '姓名 3 - 15 位长度', trigger: 'blur' }
                ]
            },
            adminPasswordValidate: {
                password: [
                    { required: true, message: '密码必须填写', trigger: 'blur' },
                    { type: 'string', min: 6, max: 15, message: '密码 6 - 15 位长度', trigger: 'blur' }
                ]
            },
            selectData: [],
        }
    },
    created() {
        // 取数据
        this.getTableList();
        this.getDepartmentRole();
    },
    methods: {
        changePage() {
            this.pages.current = this.$refs['listPage'].currentPage;
            this.getTableList();
        },
        // 选择id
        changeData(index) {
            this.selectData = index
        },
        getTableList() {
            var params = { page: this.pages.current, size: this.pages.size };
            this.$api.admin.list(params).then(res => {
                this.tablelist = res.result.list;
                this.pages.total = res.result.count
            }).finally(e=>{
                this.dataloading = false;
            });
            return;
        },
        // 获取部门及角色列表
        getDepartmentRole() {
            var params = { page: this.pages.current, 'size': 10000 };
            this.$api.role.list(params).then(res => {
                this.roleList = res.result.list;
            });
            this.$api.department.list().then(res => {
                this.departmentList = res.result;
            });
        },
        // 展开添加
        showCreate() {
            this.showCreateStatus = !this.showCreateStatus;
            this.detail_id = 0;
            this.adminInfo = {
                department_ids: [],
                role_ids: [],
                name: '',
                realname: '',
                phone: '',
                email: '',
                password: '',
                password_confirmation: ''
            };
        },
        // 添加
        createAdmin(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    this.$api.admin.create({ department_ids: this.adminInfo.department_ids, role_ids: this.adminInfo.role_ids, name: this.adminInfo.name, realname: this.adminInfo.realname, phone: this.adminInfo.phone, email: this.adminInfo.email, password: this.adminInfo.password, password_confirmation: this.adminInfo.password_confirmation }).then(res => {
                        this.adminInfo.name = '';
                        this.showCreateStatus = !this.showCreateStatus;
                        this.getTableList();
                    }).finally(res => {
                        this.loading = false;
                    });
                } else {
                    this.$Message.error('请检查输入的信息是否正确！');
                    this.loading = false
                }
            })
        },
        // 展开修改
        showEditInfo(value) {
            this.detail_id = value;
            this.showEditInfoStatus = !this.showEditInfoStatus;
            this.loading = true;
            // 取信息
            this.$api.admin.detail({ detail_id: value }).then(res => {
                this.adminInfo = res.result;
                this.role_ids = res.result.role_ids;
                this.department_ids = res.result.department_ids;
            }).finally(e=>{
                this.loading = false;
            });
        },
        // 展开修改密码
        showEditPwd(value) {
            this.detail_id = value;
            this.showEditPwdStatus = !this.showEditPwdStatus;
        },
        // 修改名称
        updateAdmin(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    this.$api.admin.editinfo({ detail_id: this.detail_id, department_ids: this.adminInfo.department_ids, role_ids: this.adminInfo.role_ids, realname: this.adminInfo.realname, phone: this.adminInfo.phone, email: this.adminInfo.email }).then(res => {
                        this.showEditInfoStatus = !this.showEditInfoStatus;
                        this.getTableList();
                    }).finally(res => {
                        this.loading = false;
                    });
                } else {
                    this.$Message.error('请检查输入的信息是否正确！');
                    this.loading = false
                }
            })
        },
        // 修改密码
        updatePassword(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    this.$api.admin.editpassword({ detail_id: this.detail_id, password: this.adminPwd.password, password_confirmation: this.adminPwd.password_confirmation }).then(res => {
                        this.showEditPwdStatus = !this.showEditPwdStatus;
                    }).finally(res => {
                        this.loading = false;
                    });
                } else {
                    this.$Message.error('请检查输入的信息是否正确！');
                    this.loading = false
                }
            })
        },
        // 删除
        removeDetail(index, id) {
            // 弹出确认框
            this.$Modal.confirm({
                title: '警告',
                content: '<p>此操作不可恢复，三思而后行...</p>',
                onOk: () => {
                    this.$api.admin.remove({ detail_id: [id] }).then(res => {
                        this.tablelist.splice(index, 1);
                    });
                }
            });
        },
        // 批量删除
        deleteData() {
            // 弹出确认框
            this.$Modal.confirm({
                title: '警告',
                content: '<p>此操作不可恢复，三思而后行...</p>',
                onOk: () => {
                    var ids = [];
                    this.selectData.forEach((item, index) => {
                        ids.push(item.id);
                    })
                    this.$api.admin.remove({ detail_id: ids }).then(res => {
                        this.getTableList();
                    });
                }
            });
        },
        // 修改状态
        changeStatus(index, value) {
            this.$api.admin.status({ detail_id: index, status: value }).then(res => {});
        },
        // 筛选
        renderTable(name) {
            this.dataloading = true;
            this.pages.current = 1;
            var ps = { 'key': this.formItem.key, 'page': 1, size: this.pages.size };
            this.$api.admin.list(ps).then(res => {
                this.tablelist = res.result.list;
                this.pages.total = res.result.count
            }).finally(e=>{
                this.dataloading = false;
            });
            return;
        }
    }
}
</script>
